<template>
	<div class="main-wrapper">
		<tab class="my-tab-item">
			<tab-item selected class="my-tab-item" @on-item-click="allOrderTab">所有订单</tab-item>
			<tab-item class="my-tab-item" @on-item-click="myOrderTab">我的订单</tab-item>
		</tab>
		<div style="display:flex;">
			<popup-picker :title="''" 
							style="flex:auto;"
							:data="getELD" 
							v-model="getELDV" 
							value-text-align="center"
							@on-change="getFilterLoc"
							:placeholder="'存货点'">
			</popup-picker>
			<popup-picker :title="''" 
							style="flex:auto;"
							:data="toELD" 
							v-model="toELDV" 
							@on-change="toFilterLoc"
							value-text-align="center"
							:placeholder="'收货点'">
			</popup-picker>
			
		</div>
		<div v-if="orderList.length" style="height:calc(100% - 2.5rem)" ref="mainWrapper">
			<scroller lock-x scrollbar-y use-pullup 
					@on-pullup-loading="pullUpLoad" 
					ref="demo1" 
					:height="scrollerH+'px'"
					:pullup-config="pullupConfig">
				<div class="myexpress-list-wrapper">
					<p class="myexpress-item" v-for="(item,i) in orderList" :key="item.expressNum">
						<form-preview :header-label="'快递名称'" :header-value="item.expressName" 
									:body-items="[{'label':'快递单号','value':item.expressNum},
													{'label':'所属人','value':item.owner},
													{'label':'积分','value':item.orderPay},
													{'label':'取货点','value':item.getEL},
													{'label':'送货点','value':item.toEL},
													{'label':'快递状态','value':item.expressStatus?'已签收':'未签收'}]" 
									:footer-buttons="[{'style': 'default','text': '查看详情',
														'link':{'name':'search','params':{'kdno':item.expressNum}}},
														{ 'style': 'primary', 'text': '抢此订单', 
														'onButtonClick':grabOrder.bind(this,i) }]">
						</form-preview>	
					</p>
				</div>
			</scroller>
		
		</div>
		<div v-else style="text-align:center;width:100%;height:calc(100% - 1.3rem)">
			没有数据
		</div>
	</div>
</template>
<script>

import checkLogin from '../myUtils/checkLogin';
import { Tab, TabItem,FormPreview, Scroller,PopupPicker  } from 'vux';
import orderListbak from '../data/orderList';
import ELD from '../data/getExpressLoc.js';
if(ELD.loc[2][0].indexOf('所有')==-1){
	ELD.loc[2].splice(0,0,'所有楼层');
	ELD.loc[3].splice(0,0,'所有房间');

}
export default {
	data(){
		return {
			orderList:orderListbak,
			scrollerH:200,
			pullupConfig:{
				content: '下拉加载新数据...',
				pullUpHeight: 60,
				height: 100,
				autoRefresh: false,
				downContent: '释放加载数据',
				upContent: '下拉加载新数据',
				loadingContent: '加载中...',
				clsPrefix: 'xs-plugin-pullup-'
			},
			getELD:ELD.getELoc,
			toELD:ELD.loc,
			getELDV:[],
			toELDV:[],
		}
	},
	methods:{
		allOrderTab(){
			this.orderList = orderListbak;
			this.reSizeScrollH();
		},
		myOrderTab(){
			this.orderList = orderListbak;
			this.reSizeScrollH();
		},
		pullUpLoad() {
			var self = this;
			setTimeout(() => {
				self.orderList = self.orderList.concat(self.orderList);
				setTimeout(() => {
					this.$refs.demo1.donePullup()
				}, 100);
			}, 1000)
		},
		grabOrder(idx){
			console.log(idx);
		},
		reSizeScrollH(){
			var refs = this.$refs;
			this.scrollerH = refs.mainWrapper.clientHeight;
			this.$nextTick(function () {
				refs.demo1.reset({top:0});
			});
		},
		checkOrderList(){
			var self = this;
			if(self.orderList.lenght){
				pullupConfig
			}
		},
		getFilterLoc(value){
			var self = this;
			var refs = this.$refs;
			var orderList = orderListbak.filter(function(v){
				return v.getEL == value.join('');
			});
			self.orderList = orderList;
			self.$nextTick(()=>{
				self.reSizeScrollH();
			});
		},
		toFilterLoc(value){
			var self = this;
			var refs = this.$refs;
			var reg = value.join(' ').replace(' 所有楼层','').replace(' 所有房间','');
			var orderList = orderListbak.filter(function(v){
				return v.toEL.indexOf(reg)>-1;
			});
			self.orderList = orderList;
			self.$nextTick(()=>{
				self.reSizeScrollH();
			});
		}
	},
	created() {
		checkLogin(this);
	},
	components: {
		Tab, TabItem,FormPreview, Scroller ,PopupPicker
	},
	mounted(){
		this.reSizeScrollH();
	},
}
</script>
<style>
	.my-tab-item{
		height: 1.3rem!important;
		line-height: 1.3rem!important;
		vertical-align: middle;
	}
	.myexpress-item {
		margin-bottom: .3rem;
	}
	.weui-form-preview__btn_default,
	.weui-form-preview__btn_primary {
		height: 1.3rem;
		line-height: 1.3rem;
		vertical-align: middle;
	}
</style>
